import React from 'react';
import styles from './index.css'
import { Avatar, Icon } from 'antd';
import hot from '@/assets/home/hot.png'
import knowledge from '@/assets/home/knowledge.png'
import atlas from '@/assets/home/atlas.png'
import dialog from '@/assets/home/dialog.png'
import { withRouter } from 'react-router-dom';

const QuestionCard = (props) => {

  const renderIcon = () => {
    let icon;
    switch (props.pageSource) {
      case 'knowledge':
        icon = knowledge;
        break;
      case 'atlas':
        icon = atlas;
        break;
      case 'dialog':
        icon = dialog;
        break;
    }
    return icon
  }

  const routerToPage = () => {
    switch (props.pageSource) {
      case 'knowledge':
        props.history.push({ pathname: '/access/answerdetailstatis' })
        break;
      case 'atlas':
        props.history.push({ pathname: '/access/atlasStatistics' })
        break;
      case 'dialog':
        props.history.push({ pathname: '/access/dialogStatistics' })
        break;
    }
  }

  return (
    <div>
      <div style={{ position: 'relative' }}>
        <Avatar src={props.pageSource === 'knowledge' ? knowledge : props.pageSource === 'atlas' ? atlas : dialog} size={20} />
        <span className={styles.card_title}>{props.title}</span>
        <span className={styles.card_more} onClick={routerToPage}>{'更多>>'}</span>
      </div>
      <div style={{ marginTop: 10 }}>
        {
          props.data.map((item, index) => {
            return (
              <div key={index} className={['clearfix', styles.questionBox_card].join(' ')} >
                <div className={index > 2 ? styles.afterNum : styles.topNum_card}>{index + 1}</div>
                <div className={styles.questionTitle_card} title={item.question}>{item.question}</div>
                <div className={styles.questionNum_card}>
                  {item.num}
                  {
                    item.sort > 0 ? <Icon type="arrow-up" className={styles.upIcon} /> :
                      item.sort < 0 ? <Icon type="arrow-down" className={styles.downIcon} /> :
                        <Icon type="arrow-minus" className={styles.downIcon} />
                  }
                </div>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}

export default withRouter(QuestionCard)
